<template>
  <Modal
    v-if="cloneConfig"
    v-model="cloneConfig.show"
    :transfer="true"
    v-bind="cloneConfig"
    :width="cloneConfig.width > 0 ? cloneConfig.width : width"
    v-debug="{me,vms,models,dataSet}"
    @on-visible-change = "config.show = cloneConfig.show"
  >
    <div slot="header" class="header">
      <Icon type="md-apps" style="margin-right:5px;" @click="navigationShow=!navigationShow;navigationFloat=true"></Icon>
      <span>{{cloneConfig.title}}</span>
    </div>
    <div
      :class="{ 'content': true }"
      :style="{ height: cloneConfig.height }"
    >
    <!-- <Row ref="printArea">
      <Row style="width:800px;height:1000px;border:1px solid;margin:10px 0px;">
        <Col span="12" style="height:100%;border:1px solid;">abc1</Col>
        <Col span="12" style="height:100%;border:1px solid;">2</Col>
      </Row>
    </Row> -->
      <Card :class="{'navigation':true,'navigation-show':navigationShow,'navigation-float':navigationFloat}" v-bind="{title:'导航'}">
        <Icon size="24" slot="extra" type="md-arrow-dropdown" :style="{color:navigationFloat?'black':'blue'}" @click="navigationFloat=false"/>
        <navTree ref="navTree" :data="dataSet.track"></navTree>
      </Card>
      <Tabs class="tab-wrapper" v-model="dataSet.currentEntry" name="entry" @on-click="tabEntrySelect">
        <template v-for="entry in dataSet.entries">
          <TabPane :label="'入口：'+entry.title" :name="entry.id" tab="entry">
            <Tabs class="subtab-wrapper" v-model="entry.subTab" :name="entry.id" @on-click="tabChildSelect">
              <template v-for="ent in dataSet.track.filter(e=>e.entry===entry.id)">
                <TabPane :label="ent.title" :name="ent.id" :tab="entry.id">
                  <component :is="ent.tag" :entry="ent"></component>
                </TabPane>
              </template>
            </Tabs>
          </TabPane>
        </template>
      </Tabs>
    </div>
    <div slot="footer">
      <slot name="footer">
        <Icon type="md-print" @click.native="print"></Icon>
        <template v-for="item in cloneConfig.buttons">
          <Button v-if="item.show" v-bind="item" @click="$emit('click', item,config)">{{
            item.text
          }}</Button>
        </template>
      </slot>
    </div>
  </Modal>
</template>

<script>
import { merge, cloneDeep } from "lodash";
import * as _ from "lodash";
import ancMixin from './ancMixin';
import cfgFormList from 'public/components/formList/cfgFormList.vue';
export default {
  components: { cfgFormList },
  name: "starSearch",
  mixins:[ancMixin],
  data() {
    return {
      width: 600,
      cloneConfig: null,
      navigationFloat:false,
      navigationShow:false,
      
    };
  },
  props: {
    config: {
      default: () => {
        return {};
      },
    },
  },
  watch: {
    config: {
      handler(val) {
        this.cloneConfig = merge(this.cloneConfig, this.config);
      },
      deep: true,
    },
  },
  computed: {
    defaultConfig() {
      return {
        show: false,
        title: "查询",
        loading: false,
        width: 0,
        height: "70vh",
        draggable: false,
        mask: true,
        closable: true,
        widthRatio: 0.7,
        buttons: [
          {
            show:true,
            type: "default",
            text: "取消",
          },
          {
            show:true,
            type: "primary",
            text: "确定",
            loading: false,
          },
        ],
      };
    },
  },
  created() {},
  mounted() {
    this.setConfig();
    this.$nextTick(() => {
      const obs = new ResizeObserver((entries) => {
        this.width = entries[0].contentRect.width * this.cloneConfig.widthRatio;
      });
      obs.observe(this.$el);
    });
  },
  methods: {
    setConfig() {
      this.cloneConfig = merge(this.defaultConfig, this.config);
      Object.keys(this.cloneConfig).map((key) => {
        this.$set(this.config, key, this.cloneConfig[key]);
      });
    },
    print(){
      var copiedElement = this.$refs.printArea.$el.cloneNode(true);
       var a = copiedElement.children[0].cloneNode(true)
       var b = copiedElement.children[0].cloneNode(true)
       var c = copiedElement.children[0].cloneNode(true)
       var d = copiedElement.children[0].cloneNode(true)
       copiedElement.append(a)
       copiedElement.append(b)
       copiedElement.append(c)
       copiedElement.append(d)
      console.log(copiedElement)
      this.$print(copiedElement);
    }
  },
};
</script>
<style scoped lang="scss">
.content {
  display:flex;
  position: relative;
  width: 100%;
  max-height: 70vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.header {
  font-size: 18px;
}
.tab-wrapper {
  width: calc(100% - 300px);
  margin: 0px 10px;
  border: 1px solid #dcdee2;
}
.subtab-wrapper {
  width: 100%;
}
.navigation {
  display: block;
  position: relative;
  width:300px;
  height:100%;
  z-index: 99;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
  ::v-deep .ivu-card-body {
    height:calc(100% - 51px);
  }
}
.tree-wrapper {
  height:100%;
  overflow: auto;
}
.navigation-float {
  position: absolute;
}
.navigation-show {
  display: none;
}

</style>